import React, { useState } from 'react'
import { Card, Form, Switch, Input, Button, Select, Divider, Space, message, Row, Col, Typography } from 'antd'
import { 
  SettingOutlined, 
  BellOutlined, 
  SecurityScanOutlined,
  UserOutlined,
  GlobalOutlined
} from '@ant-design/icons'

const { Option } = Select
const { Title, Paragraph } = Typography

/**
 * React子应用设置页面
 * @description 提供应用设置、通知设置、安全设置等功能
 */
function Settings() {
  // 状态管理
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)

  // 处理表单提交
  const handleSubmit = (values) => {
    setLoading(true)
    // 模拟API调用
    setTimeout(() => {
      console.log('设置保存:', values)
      message.success('设置保存成功')
      setLoading(false)
    }, 1000)
  }

  // 处理重置
  const handleReset = () => {
    form.resetFields()
    message.info('设置已重置')
  }

  return (
    <div>
      {/* 页面标题 */}
      <Title level={2}>应用设置</Title>
      <Paragraph>配置React子应用的各种设置选项。</Paragraph>

      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{
          // 应用设置
          appName: 'React子应用',
          appVersion: '1.0.0',
          theme: 'light',
          language: 'zh-CN',
          
          // 通知设置
          emailNotification: true,
          pushNotification: false,
          soundNotification: true,
          
          // 安全设置
          twoFactorAuth: false,
          autoLock: true,
          sessionTimeout: 30,
          
          // 隐私设置
          dataCollection: true,
          analytics: false,
          crashReporting: true
        }}
      >
        {/* 应用设置 */}
        <Card 
          title={
            <Space>
              <SettingOutlined />
              <span>应用设置</span>
            </Space>
          }
          style={{ marginBottom: 16 }}
        >
          <Row gutter={[16, 16]}>
            <Col xs={24} md={12}>
              <Form.Item
                name="appName"
                label="应用名称"
                rules={[{ required: true, message: '请输入应用名称' }]}
              >
                <Input placeholder="请输入应用名称" />
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item
                name="appVersion"
                label="应用版本"
              >
                <Input placeholder="应用版本" disabled />
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item
                name="theme"
                label="主题设置"
              >
                <Select placeholder="选择主题">
                  <Option value="light">浅色主题</Option>
                  <Option value="dark">深色主题</Option>
                  <Option value="auto">跟随系统</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item
                name="language"
                label="语言设置"
              >
                <Select placeholder="选择语言">
                  <Option value="zh-CN">简体中文</Option>
                  <Option value="en-US">English</Option>
                  <Option value="ja-JP">日本語</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 通知设置 */}
        <Card 
          title={
            <Space>
              <BellOutlined />
              <span>通知设置</span>
            </Space>
          }
          style={{ marginBottom: 16 }}
        >
          <Row gutter={[16, 16]}>
            <Col xs={24} md={8}>
              <Form.Item
                name="emailNotification"
                label="邮件通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="pushNotification"
                label="推送通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="soundNotification"
                label="声音通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 安全设置 */}
        <Card 
          title={
            <Space>
              <SecurityScanOutlined />
              <span>安全设置</span>
            </Space>
          }
          style={{ marginBottom: 16 }}
        >
          <Row gutter={[16, 16]}>
            <Col xs={24} md={8}>
              <Form.Item
                name="twoFactorAuth"
                label="双重认证"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="autoLock"
                label="自动锁定"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="sessionTimeout"
                label="会话超时(分钟)"
              >
                <Select placeholder="选择超时时间">
                  <Option value={15}>15分钟</Option>
                  <Option value={30}>30分钟</Option>
                  <Option value={60}>1小时</Option>
                  <Option value={120}>2小时</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 隐私设置 */}
        <Card 
          title={
            <Space>
              <UserOutlined />
              <span>隐私设置</span>
            </Space>
          }
          style={{ marginBottom: 16 }}
        >
          <Row gutter={[16, 16]}>
            <Col xs={24} md={8}>
              <Form.Item
                name="dataCollection"
                label="数据收集"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="analytics"
                label="分析统计"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="crashReporting"
                label="崩溃报告"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 操作按钮 */}
        <Card>
          <Space>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              icon={<SettingOutlined />}
            >
              保存设置
            </Button>
            <Button 
              onClick={handleReset}
              icon={<GlobalOutlined />}
            >
              重置设置
            </Button>
          </Space>
        </Card>
      </Form>
    </div>
  )
}

export default Settings 